<template>
  <view class="teamcenter">
    <view class="porser">
      <view class="list bgRadius boxshadow" v-for="(item,index) in dataList" :key="index">
        <view class="centeruser flex flex-align">
          <image :src="getImgUrl(item.avatar)" mode="scaleToFill" />
          <view class="centername">
            <view class="name">{{item.name}}</view>
            <view>
              <view class="id">
                <view class="ids">ID</view>
                <view class="nums">{{item.id}}</view>
              </view>
              <view class="id" v-if="item.phone" @click="callPhone(item.phone)">
                <view class="ids"><uni-icons type="phone" size="14" color="#fff"></uni-icons></view>
                <view class="nums">{{item.phone}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="flex flex-align listmain">
          <view class="flex-1">
            <view class="listTitle">收益</view>
            <view class="listNum">¥{{ item.profit }}</view>
          </view>
          <view class="flex-1">
            <view class="listTitle">加入时间</view>
            <view class="listNum">{{timestampToDateJian(item.created_at)}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {  myTeam } from '@/api/user';
import { getImgUrl, timestampToDateJian,callPhone } from '@/utils/tools';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue'
const dataList = ref<Recordable>([])
const frames = reactive({
  page:1,
  size: 10,
})
const total = ref(0)
const type = ref(0)
onLoad((e:any) => {
  type.value = e.type
  uni.setNavigationBarTitle({
    title: e.name
  })
  applyTeam()
})
onReachBottom(() => {
  if(dataList.value.length == total.value) {
    return
  }
  frames.page = frames.page + 1
  applyTeam()
})
function applyTeam() {
  myTeam(frames).then((res:any) => {
    if(res) {
      if(frames.page == 1) {
        dataList.value = res.data
      }else {
        dataList.value = dataList.value.concat(res.data)
      }
      total.value = res.total
    }
  })
}

</script>

<style scoped lang="scss">
.teamcenter{padding-bottom: 4rpx;}
  .list{margin: 30rpx;padding: 30rpx;
    image{width: 90rpx;height: 90rpx;border-radius: 100%;margin-right: 16rpx;}
    .centername{color: #323233;
      .name{font-size:28rpx;font-weight: 600;}
      .id{font-size: 24rpx;margin-top: 10rpx;background: linear-gradient(to right,#FFF2E7,#FFDFD9);padding:2rpx 16rpx 2rpx 0;border-radius:30rpx 30rpx 0 30rpx;height:34rpx;display: inline-block;
        margin-right: 20rpx;
        .ids{background: #FE7431;color: #fff;border-radius:30rpx 0rpx 30rpx 30rpx;width: 50rpx;text-align: center;margin-right: 10rpx;height: 100%;display: inline-block;}
        .nums{display: inline-block;color: #FE7431;font-weight: 400;}
      }
    }
   .listmain{margin-top: 20rpx;background: #F3F4F7;text-align: center;padding: 30rpx 0;border-radius: 10rpx;
    .listTitle{font-size: 24rpx;color: #999;}
    .listNum{font-size: 32rpx;color: #323233;font-weight: 600;margin-top: 10rpx;}
    .flex-1{position: relative;}
    .flex-1:last-child::after{position: absolute;top: 50%;left: 0;width: 2rpx;height: 40rpx;margin-top: -20rpx;background: #C8C9CC;content: '';}
   }
  }
  
</style>